<template>
  <div class="single">
      <div class="container">
			<!----top-header---->
			<div class="top-header">
				<div class="logo">
					<img src="../../images/logo.png" title="barndlogo" />
				</div>
				<div class="top-header-info">
					<div class="cart-details">
						<div class="login-rigister">
							<ul class="unstyled-list list-inline">
								<li><a class="login" href="#" @click="login">登录</a></li>
								<li><button style="background: #F03627; color: #FFF; padding: 0.5em 2.5em; border-radius: 0.3em; font-weight: 600;"><router-link to="/Goods">购物车</router-link></button></li>
								<div class="clearfix"> </div>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!---导航菜单---->
			<div class="top-header-nav"> 
			 <nav class="top-nav main-menu">
					<ul class="top-nav">
						<li><a href="#" @click="sendIndex">首页</a><span></span></li>
						<li><a href="#">产品</a><span> </span></li>
						<li><a href="#">服务</a><span> </span></li>
						<li><a href="#">品牌</a><span> </span></li>
						<li><a href="#">关于我们</a></li>
						<div class="clearfix"> </div>
					</ul>
					<a href="#" id="pull"><img src="../../images/nav-icon.png" title="menu" /></a>
			  </nav>
			  <!---搜索--->
			  <div class="top-header-search-box">
			  	<!-- <form @submit.native.prevent> -->
					  <!-- required要求不能为空 maxlength限制输入长度 -->
			  		<input type="text" required  maxlength="22" v-model="inputKey" @keyup.enter="search(inputKey)">
			  		<input type="submit" value=" ">
			  	<!-- </form> -->
			  </div>
						<div class="clearfix"> </div>
			</div>
		</div>
    <!--筛选-->
		<div class="content">
			<div class="container">
				<!-- 筛选 -->
				<div class="products">
					<div class="product-filter">
						<h1><a href="#">搜索结果</a></h1>
						<div class="product-filter-grids"> 
              <!-- 引用element-ui -->
						<el-container>
              <el-header>官方品牌PORLE</el-header>
              <el-container>
                <!-- 商品图片 -->
                <el-aside width="400px">
                  <img :src="list[0].goods_img2" alt="">
                </el-aside>
                <!-- 商品信息 -->
                <el-main>
                  <!-- 购买信息 -->
                  <el-form ref="form" :model="form" label-width="80px" >
                    <el-form-item label="商品名称">
                      <h4>{{list[0].goods_name}}</h4>
                      <!-- 评分 -->
                      <p>
                        <el-rate
                        v-model="value"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                      </el-rate>
                      </p>
                    </el-form-item>
                    <el-form-item label="发货区域">
                      <el-select v-model="form.region" placeholder="请选择发货区域">
                        <el-option label="北京" value="shanghai"></el-option>
                        <el-option label="上海" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="发货时间">
                      <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                      </el-col>
                      <el-col class="line" :span="2"> -</el-col>
                      <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="即时配送">
                      <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="商品保障">
                      <el-checkbox-group v-model="form.type">
                        <el-checkbox label="假一赔四" name="type" checked="checked"></el-checkbox>
                        <el-checkbox label="上门取退" name="type" checked="checked"></el-checkbox>
                        <el-checkbox label="极速退款" name="type" checked="checked"></el-checkbox>
                        <el-checkbox label="七天无理由退换" name="type" checked="checked"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="特殊服务">
                      <el-radio-group v-model="form.resource">
                        <el-radio label="线上货到付款"></el-radio>
                        <el-radio label="线下商场购买"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="收货地址">
                      <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                    <!-- 购买按钮 -->
                    <el-form-item>
                    <el-row>
                      <el-button @click="deliver" icon="el-icon-shopping-cart-full" type="danger">立即购买</el-button>
                      <el-button @click="send" icon="el-icon-shopping-cart-2" type="danger">购物车</el-button>
                    </el-row>
                    </el-form-item>
                  </el-form>
                </el-main>
              </el-container>
            </el-container>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
				</div>
		</div>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'
export default {
  data() {
      return {
        //实现搜索
        inputKey: 'Search',
        //评分
        value: 4.8,
        //默认显示的商品
        list: [
        {goods_count: 1, goods_img1: require("../../images/b1.jpg"), goods_img2: require("../../images/p1.jpg"), goods_name: '耐克玫瑰鞋', goods_price: 199, goods_state: true, id: 11},
        ],
        //总商品
        lists: [
        {goods_count: 1, goods_img1: require("../../images/b1.jpg"), goods_img2: require("../../images/p1.jpg"), goods_name: '耐克玫瑰鞋', goods_price: 199, goods_state: true, id: 11},
		    {goods_count: 1, goods_img1: require("../../images/b2.jpg"), goods_img2: require("../../images/p2.jpg"), goods_name: '线路链接67009', goods_price: 199, goods_state: true, id: 12},
        {goods_count: 1, goods_img1: require("../../images/b3.jpg"), goods_img2: require("../../images/p3.jpg"), goods_name: '极小值零', goods_price: 199, goods_state: true, id: 13},
        {goods_count: 1, goods_img1: require("../../images/b4.jpg"), goods_img2: require("../../images/p4.jpg"), goods_name: '运动鞋', goods_price: 199, goods_state: false, id: 14},
        {goods_count: 1, goods_img1: require("../../images/b5.jpg"), goods_img2: require("../../images/p2.jpg"), goods_name: '维罗尼克', goods_price: 199, goods_state: true, id: 15},
        {goods_count: 1, goods_img1: require("../../images/b6.jpg"), goods_img2: require("../../images/p6.jpg"), goods_name: '绒面鞋靴子', goods_price: 199, goods_state: true, id: 16},
        {goods_count: 1, goods_img1: require("../../images/b7.jpg"), goods_img2: require("../../images/p7.jpg"), goods_name: '路障 6.0', goods_price: 199, goods_state: true, id: 17},
        {goods_count: 1, goods_img1: require("../../images/b1.jpg"), goods_img2: require("../../images/p8.jpg"), goods_name: '科图经典', goods_price: 199, goods_state: true, id: 18},
		    ],
        // element-ui商品购买信息
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods:{
      // 跳转到首页
      sendIndex(){
        this.$router.push('/index')
      },
      //跳转到登陆页面
      login(){
			this.$router.push('/login')
		  },
      // 跳转到待发货
      deliver(){
			this.$router.push('/deliver')
		  },

    // 将当前商品加入购物车Goods
      send(){
            this.$message({
              message: `加入购物车成功`
            });
        bus.$emit('share',this.list[0])
      },
    // 搜索
      search (inputKey) {
      return this.lists.filter(item => {
        if (item.goods_name.includes(inputKey)){
          // 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
          this.$set(this.list, 0,item)
          return true;//返回true终止循环
        }
        // $forceUpdate可以迫使 Vue 实例重新渲染。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
        // this.$forceUpdate();
      })
    }
    },
    // 接受到Index发送过来的商品信息
    created(){
    bus.$on('sedSingle', val =>{
      console.log(val);
      this.$set(this.list, 0, val)
    })
  }
}
</script>

<style scoped>
  @import "../../css/style.css";
  @import "../../css/bootstrap.css";
  .el-header, .el-footer {
    background-color: #F03627;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 300px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center; */
    line-height: 260px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>